import React, { PureComponent, createRef } from 'react';
import Title from 'react-document-title';
import { withRouter } from 'react-router-dom';

import { getOrderList } from '@api/order';
import { store } from '@store'


import { Tabs, Badge } from 'antd-mobile';
import { OrderStyle } from './style';
import BetterScroll from 'components/betterScroll';
import { EmptyData } from '@common';

import OrderItem from './component/orderItem';
import { LoadingMore } from 'components/loading'


const tabs = [
  { title: <Badge text={''}>全部订单</Badge> },
  // { title: <Badge text={'3'}>待付款</Badge> },
  { title: <Badge >待发货</Badge> },
  { title: <Badge >待收货</Badge> },
  { title: <Badge >待评价</Badge> },
  { title: <Badge >待售后</Badge> }
];


class Order extends PureComponent {
  state = {
    orderList: [],
    isOl: true,
    tabsPage: 0,
    mapConfig: [
      { status: '999', key: 'qazw' },
      { status: '0', key: 'qwaz' },
      { status: '1', key: 'qzaw' },
      { status: '2', key: 'qszw' },
      { status: '999', key: 'qkzw' }
    ]
  }

  uniacid = store.getState().appConfig.uniacid

  config = {
    uniacid: this.uniacid,
    page: -1,
    page_num: 5,
  };

  OR_Scroll = createRef();


  componentDidMount() {

    let status = this.props.match.params.id
    switch (status) {
      case '0':
        this.getOrderListData(999)
        break;
      case '1':
        this.setState({
          tabsPage: 1
        }, () => {
          this.getOrderListData(0)
        })
        break;
      case '2':
        this.setState({
          tabsPage: 2
        }, () => {
          this.getOrderListData(1);
        })
        break;
      case '3':
        this.setState({
          tabsPage: 3
        }, () => {
          this.getOrderListData(2);
        })
        break;
      case '4':
        this.setState({
          tabsPage: 4
        }, () => {
          this.getOrderListData(999);
        })
        break;
      default:
        break;
    }
  }

  render() {

    const { orderList, tabsPage, isOl, mapConfig } = this.state
    return (
      <>
        <OrderStyle>
          <Title title='采购订单' />

          <Tabs tabs={tabs}
            tabBarInactiveTextColor="#474747"
            tabBarActiveTextColor="#FF762E"
            tabBarUnderlineStyle={{ border: "#FF762E solid 1px" }}
            swipeable={false}
            initialPage={0}
            page={tabsPage}
            onChange={(tab, index) => { this.handelChange(index) }}
          >


            {
              mapConfig.map((itex, kex) => {
                return (
                  kex === tabsPage && <BetterScroll
                    key={kex + itex.key}
                    isLoadMore={isOl}
                    loadMore={e => { this.switchLoadingMore(itex.status) }}
                    style={{ height: " calc( 100vh - 3rem - env(safe-area-inset-bottom) )", marginTop: '.32rem' }}
                    ref={this.OR_Scroll}>
                    <div style={{ backgroundColor: '#F5F5F5' }}>
                      {
                        tabsPage !== 4 && (orderList.length > 0) &&
                        orderList.map((item, key) => {
                          return (
                            <OrderItem key={key + item.orderno} index={key} item={item} />
                          )
                        })
                      }

                      {
                        tabsPage === 4 && (orderList.length > 0) &&
                        orderList.map((item, key) => {
                          return (
                            item.refund.refund !== '0' && <OrderItem key={key + item.orderno} index={key} item={item} />
                          )
                        })
                      }

                      {
                        orderList.length > 3 &&
                        <LoadingMore isLoading={isOl}>

                        </LoadingMore>
                      }

                      {
                        orderList.length === 0 && <EmptyData />
                      }

                    </div>
                  </BetterScroll>
                )
              })
            }

          </Tabs>
        </OrderStyle>
      </>
    );
  }

  switchLoadingMore(status) {
    this.getOrderListData(status)
  }


  getOrderListData(status) {

    this.config.status = status;
    this.config.page += 1;
    getOrderList(this.config).then(res => {

      if (res.status === 200) {


        if (res.data.length !== 0) {
          if (this.config.page === 0) {

            this.setState({
              orderList: res.data
            }, () => {
              
              try {
                this.OR_Scroll.current.BScroll.refresh();
                this.OR_Scroll.current.BScroll.finishPullUp();
              } catch (error) {
                console.log(error)
              }
            })
          } else {
            this.setState({
              orderList: [...this.state.orderList, ...res.data]
            }, () => {
              try {
                this.OR_Scroll.current.BScroll.refresh();
                this.OR_Scroll.current.BScroll.finishPullUp();
              } catch (error) {
                console.log(error)
              }
            })
          }


        } else {
          //  如果下一页放回的数据为空
          console.log('如果下一页放回的数据为空')
          this.setState({
            isOl: false
          }, () => {
            try {
              this.OR_Scroll.current.BScroll.finishPullUp();
            } catch (error) {

            }
          }
          )
        }

      } else {
        console.log(res.msg)
      }
    })
  }

  handelChange(index) {
    console.log(index, 'handel')
    switch (index) {
      case 0:
        this.config.page = -1;
        this.setState({
          tabsPage: 0,
          orderList: []
        }, () => {
          this.getOrderListData(999)
        })
        break;
      case 1:
        this.config.page = -1;
        this.setState({
          tabsPage: 1,
          orderList: []
        }, () => {
          this.getOrderListData(0)
        })
        break;
      case 2:
        this.config.page = -1;
        this.setState({
          tabsPage: 2,
          orderList: []
        }, () => {
          this.getOrderListData(1);
        })
        break;
      case 3:
        this.config.page = -1;
        this.setState({
          tabsPage: 3,
          orderList: []
        }, () => {
          this.getOrderListData(2);
        })
        break;
      case 4:
        this.config.page = -1;
        this.setState({
          tabsPage: 4,
          orderList: []
        }, () => {
          this.getOrderListData(999);
        })
        break;
      default:
        break;
    }

  }

  goOrderDetail(e) {
    this.props.history.push('/order/detail')
  }

}



export default withRouter(Order);